// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;
@use './boxes' as *;

.sideBar {
  float: right;
  width: 340px;

  h1 {
    margin: 0;
    padding: 0;
    color: $light-black;
    font-size: 15px;
  }

  ul {
    padding: 0;
    list-style-type: none;
  }

  em {
    color: $light-black;
  }

  .content {
    @include default-border-radius();
    background-color: #ececec;
    padding: 2em;
  }

  a {
    &.advanced {
      font-style: italic;
    }

    &.subLink {
      font-style: italic;
      font-size: 14px;
    }
  }
}

.side-menu {
  @include font-family-title();
  user-select: none;
  @include single-box-shadow();
  @include border-all();
  @include default-border-radius();
  font-size: 1.1em;

  ul.menu-items > li.section {
    padding: 0;

    .title-wrapper {
      @include icon-before('icon-arrow-down');
      display: flex;
      align-items: center;
      cursor: pointer;

      &::before {
        @include rotate-transform(0.3s);
        display: inline-block;
      }
    }

    &.collapsed {
      // We do not hide the <ul> here since we use JS to animate opening/closing a section
      .title-wrapper::before {
        transform: rotate(-90deg);
      }
    }
  }

  ul.menu-items {
    list-style-type: none;
    padding: 0;
    margin: 0;

    > li {
      @include border-bottom();
      display: block;
      margin: 0;

      &.disabled {
        color: $dark-gray;
      }

      &:last-child {
        border-bottom: none;
      }

      .title-wrapper {
        display: block;
        min-height: 2.6em;
        line-height: 2.6em;
        padding-left: 9px;

        .title {
          display: inline;
          padding-left: 3px;
        }
      }

      .title {
        display: flex;
        align-items: center;
        min-height: 2.6em;
        line-height: 2.6em;
        color: $black;
        padding-left: 26px;

        &::before {
          margin-right: 0.5em;
        }
      }

      a.title {
        color: $dark-blue;
      }

      > ul {
        list-style-type: none;
        font-size: 0.95em;
        padding: 0;

        > li .title {
          display: flex;
          min-height: 2em;
          line-height: 2em;
          padding-left: 51px;
        }
      }

      &:last-child > ul > li:last-child {
        margin-bottom: 0;
      }

      &:not(.active) a.title:hover {
        color: $darker-blue;
        background-color: $light-gray;
      }

      &.active a.title {
        color: $darker-blue;
      }

      i.icon {
        width: 14.3px;
        height: auto;
        margin-right: 7.15px;
        font-size: 0.83em;
      }
    }
  }
}

ul.menu-items li.active {
  @include inner-border-left($link, $width: 2px);
  position: relative;
  background-color: $light-blue;

  > a {
    font-weight: normal;
  }
}
